---
title: Toggle Group
description: A set of two-state buttons that can be toggled on or off.
---

import { CommandTabs } from "@docs/components/command-tabs";
import { ExternalLinks } from "@docs/components/external-links";
import { PreviewCard } from "@docs/components/preview-card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@docs/components/ui/tabs";
import { ToggleGroupPreview } from "@docs/components/examples";
import { Step, Steps } from 'fumadocs-ui/components/steps';

<ExternalLinks
  links={[  
    { title: 'Docs', url: 'https://rnprimitives.com/toggle-group/' },
    { title: 'API Reference', url: 'https://rnprimitives.com/toggle-group/#props' },
  ]}
/>

<div className="h-5"/>

<Tabs defaultValue="preview">
  <TabsList>
    <TabsTrigger value="preview">Preview</TabsTrigger>
    <TabsTrigger value="code">Code</TabsTrigger>
  </TabsList>
  <TabsContent value="preview">
    <div id="preview" className='*:hidden scroll-m-20' aria-hidden>
      ## Preview
    </div>
    <PreviewCard preview={<ToggleGroupPreview />} />
  </TabsContent>
  <TabsContent value="code">
    ```json doc-gen:file
    {
      "file": "./node_modules/@rnr/registry/src/examples/toggle-group.tsx",
      "codeblock": {
        "lang": "tsx"
      }
    }
    ```
  </TabsContent>
</Tabs>


## Installation

<Tabs defaultValue="cli">
  <TabsList>
    <TabsTrigger id="cli" value="cli">CLI</TabsTrigger>
    <TabsTrigger id="manual" value="manual">Manual</TabsTrigger>
  </TabsList>
  <TabsContent value="cli">
     <CommandTabs args={["add", "toggle-group"]}/>
  </TabsContent>
  <TabsContent value="manual">
    <Steps> 
      <Step>
 
        **Install the following dependency:**

        ```
        npx expo install @rn-primitives/toggle-group
        ```

      </Step>
      <Step>
 
        **Copy and paste the following code into your project.**

        ```json doc-gen:file
        {
          "file": "./node_modules/@rnr/registry/src/new-york/components/ui/text.tsx",
          "codeblock": {
            "lang": "tsx",
            "meta": "title=\"@/components/ui/text.tsx\""
          }
        }
        ```

        ```json doc-gen:file
        {
          "file": "./node_modules/@rnr/registry/src/new-york/components/ui/icon.tsx",
          "codeblock": {
            "lang": "tsx",
            "meta": "title=\"@/components/ui/icon.tsx\""
          }
        }
        ```
        
        ```json doc-gen:file
        {
          "file": "./node_modules/@rnr/registry/src/new-york/components/ui/toggle.tsx",
          "codeblock": {
            "lang": "tsx",
            "meta": "title=\"@/components/ui/toggle.tsx\""
          }
        }
        ```
        
        ```json doc-gen:file
        {
          "file": "./node_modules/@rnr/registry/src/new-york/components/ui/toggle-group.tsx",
          "codeblock": {
            "lang": "tsx",
            "meta": "title=\"@/components/ui/toggle-group.tsx\""
          }
        }
        ```

      </Step>
      <Step>

        **Update the import paths to match your project setup.**

      </Step>
    </Steps>

  </TabsContent>
</Tabs>

### Usage

```tsx
import { Bold, Italic, Underline } from 'lucide-react-native';
import { ToggleGroup, ToggleGroupIcon, ToggleGroupItem } from '@/components/ui/toggle-group';
import * as React from 'react';
```

```tsx
  const [value, setValue] = React.useState<string[]>([]);
  return (
    <ToggleGroup value={value} onValueChange={setValue} variant='outline' type='multiple'>
      <ToggleGroupItem isFirst value='bold' aria-label='Toggle bold'>
        <ToggleGroupIcon as={Bold} />
      </ToggleGroupItem>
      <ToggleGroupItem value='italic' aria-label='Toggle italic'>
        <ToggleGroupIcon as={Italic} />
      </ToggleGroupItem>
      <ToggleGroupItem isLast value='strikethrough' aria-label='Toggle strikethrough'>
        <ToggleGroupIcon as={Underline} />
      </ToggleGroupItem>
    </ToggleGroup>
  );
```

